<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom节点的属性</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #47b6ff;
        }

        .success{
            background-color: green;
        }

    </style>
</head>
<body>
<a id="nav" href="#">主页</a>
<div id="message" ></div>

<button id="btn" >按钮1</button>
</body>
<script>

    /* 1. 通过选择器找到dom节点
    *  2. 修改dom节点
    * */
  /*
   *  js修改属性
   *    1. 一般属性
   *    2. 样式
   *    3. 事件
  * */

  /*1. 一般属性*/
   var link= document.getElementById('nav');
   link.href = "index.html";

   /*2.样式*/
    var message = document.getElementById('message');
 /*   message.style.width = "100px";
    message.style.height = "100px";
    message.style.backgroundColor = "grey";//*/


    //message.className = "box success";

    message.classList.add("box");
    message.classList.add("success");

    /*3.事件*/
    var btn = document.getElementById('btn');
    /*
      * 事件绑定
      *    事件名称-click
      *    处理方法-
      *    事件绑定-
      *
    * */
  //  btn.onclick = btnClick;
   btn.onclick =function (event) {
       console.log(event);// 打印在console控制台
       event.target.innerText = "h";
    //   this.innerText = "hello"
        //alert(this.innerText);// this 指向触发事件的那个元素
    }

    function btnClick() {
        alert("你点击了按钮1");
    }

</script>
</html>